<template>
  <div class="home">
    <div class="info_Header">
      <ul>
        <li class="Header_quit" @click="$router.back(-1)">
          <Icon type="ios-arrow-back" size="30" class="Icon_Header icon_quit"/>
        </li>
        <li class="Header_text">
          {{HeaderTitle}}
        </li>
        <li class="Header_dian"  @click="tit_le" v-if="HeaderTitleRight.title != undefined">
          {{HeaderTitleRight.title}}
        </li>
        <li class="Header_dian" v-if="HeaderTitleRight.title == undefined">
          <Dropdown trigger="click" style="margin-left: 20px">
              <Icon type="ios-more" size="30" class=" icon_dian"/>
            <DropdownMenu slot="list">
              <router-link  to="/foo">
                <DropdownItem >驴打滚</DropdownItem>
              </router-link>
              <DropdownItem >炸酱面</DropdownItem>
              <DropdownItem >豆汁儿</DropdownItem>
              <DropdownItem >冰糖葫芦</DropdownItem>
              <DropdownItem >北京烤鸭</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      HeaderTitle: {
        type: String,
        default() {
          return ''
        }
      },
      HeaderTitleRight:{
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: {},
    data() {
      return {
        right_flag:true
      }
    },
    methods: {
      tit_le(){
        this.$router.push({path:this.HeaderTitleRight.path});
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  /*******************导航***************************/
  .info_Header {
    width: 100%;
    height: 44px;
    background: white;
  }

  .icon_quit {
    text-align: center;

  }

  .icon_dian {
    text-align: right;    width: 100%;
  }

  .Icon_Header {
    width: 100%;
    margin-top: calc(100% / 10);
  }

  .info_Header ul {
    width: 100%;
    height: 100%;
  }

  .info_Header ul li {
    height: 100%;
    float: left;
  }

  .Header_quit {
    width: 15%;
  }

  .Header_text {
    width: 65%;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    color: #333;
  }

  .Header_dian {
    width: 20%;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
  }
</style>
